<template>
	<view class="page">
		<v-header title="会议室预定" @click-left="$back()"></v-header>
		<view class="layout" :style="{ marginTop: h + 'px' }">
			<view class="confrenceContainer">
				<!-- 搜索 -->
				<view class="searchCont  f fb">
					<view class=" f  borInput">
						<picker mode="region" @change="selectChange($event, 'cate')" class=" fl " :value="[]" range-key="value">
							<input :value="cateArray[cateIndex].value" disabled placeholder="请选择城市" class="disInput" />
						</picker>
						<text class="cuIcon-unfold"></text>
					</view>
					<view class=" f  borInput">
						<picker @change="selectChange($event, 'status')" class=" fl " :value="statuIndex" :range="statuArray" range-key="value">
							<input :value="statuArray[statuIndex].value" disabled placeholder="请选择楼宇" class="disInput" />
						</picker>
						<text class="cuIcon-unfold"></text>
					</view>
				</view>
				<!-- 楼层 -->
				<view class="roomCont f">
					<view class="room f fc" v-for="(item, index) in roomArray" :key="index" :class="{ actTime: room == index }" @click="roomTap(index)">{{ item.value }}</view>
					<view class="room f fc" :class="{ actTime: room == -1 }" @click="allRoom">全部楼层</view>
				</view>
				<!-- 日历 -->
				<view class="canlnder"><lxCalendar @change="change"></lxCalendar></view>
				<!-- 内容 -->
				<view class="confrenceContent" @click="toMakeConfrence">
					<view class="cont" v-for="(item, index) in 3" :key="index">
						<view class="top f fb">
							<view class="left"><image src="../../static/img/active-list.png" mode="aspectFill"></image></view>
							<view class="right fl">
								<view class="title f fb ">
									<text class="small">世宁大厦</text>
									<text class="lc">17层</text>
								</view>
								<view class="rom">会议室</view>
								<view class="title">面积：22平米</view>
								<view class="title">容量：10人以下</view>
							</view>
						</view>
						<!-- 时间 -->
						<view class="bottom f ">
							<view
								class="timecont  f fc fn"
								:class="[{ disTime: item.status != 0 }, { actTime: item.status == 2 }]"
								v-for="(item, index) in dataArray"
								:key="index"
								@click="dateTap(item, item.status)"
							>
								<view class="time">{{ item.time }}</view>
								<view class="date">{{ item.status == 0 ? '可预约' : item.status == 1 ? '已预约' : item.status == 2 ? '已选中' : '暂无数据' }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import lxCalendar from '../../components/lx-calendar/lx-calendar.vue';
export default {
	components: {
		lxCalendar
	},
	data() {
		return {
			h: this.$h,
			//城市
			cateIndex: -1,
			cateArray: [
				{
					code: 0,
					value: '企业入孵'
				},
				{
					code: 1,
					value: '法律服务合同'
				}
			],
			//楼宇
			statuIndex: -1,
			statuArray: [
				{
					code: 0,
					value: '世宁大厦'
				},
				{
					code: 1,
					value: '腾讯大厦'
				}
			],
			//楼层
			room: -1,
			roomArray: [
				{
					code: 0,
					value: '14层'
				},
				{
					code: 1,
					value: '15层'
				},
				{
					code: 2,
					value: '16层'
				}
			],
			dateIndex: 0,
			//时间
			dataArray: [
				{ status: 0, time: '09:00~10:00' },
				{ status: 0, time: '10:00~11:00' },
				{ status: 1, time: '11:00~12:00' },
				{ status: 0, time: '12:00~13:00' },
				{ status: 1, time: '13:00~14:00' },
				{ status: 0, time: '14:00~15:00' },
				{ status: 1, time: '15:00~16:00' },
				{ status: 0, time: '16:00~17:00' }
			]
		};
	},
	methods: {
		//筛选条件
		selectChange(e, type) {
			let than = this;
			let index = e.target.value;
			if (type == 'status') {
				//隐患状态
				if (index >= 0) {
					than.statuIndex = index;
				}
			} else if (type == 'cate') {
				//隐患状态
				if (index >= 0) {
					than.cateIndex = index;
				}
			}
		},
		//选择日历
		change(e) {
			console.log(e);
		},
		//切换时间
		dateTap(index) {
			this.dateIndex = index;
		},
		//切换楼层
		roomTap(index) {
			this.room = index;
		},
		//点击全部楼层
		allRoom() {
			this.room = -1;
		},
		//预定会议
		toMakeConfrence() {
			uni.navigateTo({
				url: './makeConference'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/style/conference.scss';
</style>
